import React, { Component, PropTypes } from "react"
import { AdvancedTable } from "components/index"
import Space from "components/space"
import { messages } from "share/common"
import { Button } from 'antd'
import Info from "components/info"
import menuRoute from "routes/menuRoute"
import SlideFrame from "components/slide-frame"
import companyAccountSettingService from "../company-account-setting.service"
import AliRule from "./ali-rule"
import DataHoc from "../hoc/data-hoc"

const { SimpleTable } = AdvancedTable;

@DataHoc
class AliAccount extends Component {

  key = 'ali-account';

  appId = '2021001132681890';

  service = (page, pageSize, searchParams) => {
    return companyAccountSettingService.getAliList({page, size: pageSize, ...searchParams});
  };

  handleRule = () => {
    SlideFrame.open({
      content: AliRule,
      afterClose: value => { value && this.tableRef.getList() },
      title: messages('finance-4.key347')/*企业支付宝账户*/,
      params: { record: {} }
    }, this);
  };

  handleClickRow = record => {
    this.props.context.router.push(menuRoute.getRouteItem('ali-bank-account-detail', 'key').url.replace(":companyBankId", record.alipayAccountId));
  };

  render () {
    const { getColumns, getSearch, disabled } = this.props;
    return (
      <SimpleTable
        service={this.service}
        searchForm={getSearch(this.key)}
        columns={getColumns(this.key)}
        onRef={ref => this.tableRef = ref}
        rowKey='id'
        onRow={record => ({
          onClick: () => this.handleClickRow(record)
        })}
      >
        <Space size='middle' direction='vertical'>
          <Info
            dataSource={{ description: messages('finance-4.key350')/*您可在此页面维护企业支付宝账户，进行使用人员授权、付款方式授权、付款单据公司授权，系统将根据您配置的授权，自动判断支付操作时允许使用的企业支付宝账号；*/ }}
            attributes={[{
              title: messages('finance-4.key351')/*设置说明*/, dataIndex: 'description', span: 24
            }]}
          />
          <Space>
            <Button
              type='primary'
              onClick={this.handleRule}
              disabled={disabled}
            >
              {messages('finance-4.key352')/*新建账户*/}
            </Button>
          </Space>
        </Space>
      </SimpleTable>
    )
  }

}

AliAccount.contextTypes = {
  router: PropTypes.object
};

export default AliAccount
